<template>
  <div class="home">
    <van-nav-bar
        title="E查社保服务平台"
        left-text=""
    />

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <router-link to="/content"><img class="banner" v-lazy="image"/></router-link>
      </van-swipe-item>
    </van-swipe>

    <h3>
      &nbsp;&nbsp;<van-icon name="service" /> 服务指南
    </h3>

    <van-row>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="column" color="#1989fa" size="1.5em" />
          <span class="cell-title">买前必读</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="balance-list" color="#1989fa" size="1.5em" />
          <span class="cell-title">购买流程</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="manager" color="#1989fa" size="1.5em" />
          <span class="cell-title">社保缴费</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="like" color="#1989fa" size="1.5em" />
          <span class="cell-title">公积金缴费</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="gold-coin" color="#1989fa" size="1.5em" />
          <span class="cell-title">个人缴费</span>
        </div>
      </van-col>
      <van-col span="12">
        <div class="home-item">
          <van-icon name="chat" color="#1989fa" size="1.5em" />
          <span class="cell-title">特色服务</span>
        </div>
      </van-col>
    </van-row>

    <div class="hot-line">服务热线：400-990-1910</div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="balance-list" to="/jiaofei">缴费</van-tabbar-item>
      <van-tabbar-item icon="manager" to="/user">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Swipe, SwipeItem, Row, Col, Icon, NavBar, Tabbar, TabbarItem, Lazyload} from "vant";

  Vue.use(Lazyload);
  export default {
    name: "home",
    data() {
      return {
        active: 0,
        images: [
          'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
          'https://img.yzcdn.cn/2.jpg'
        ]
      }
    },
    components: {
      "van-swipe": Swipe,
      "van-swipe-item": SwipeItem,
      "van-row": Row,
      "van-col": Col,
      "van-nav-bar": NavBar,
      "van-icon": Icon,
      "van-tabbar": Tabbar,
      "van-tabbar-item": TabbarItem
    }
  };
</script>

<style scoped>
  .home {
    background-color: #FAFAFA;
  }
  .banner{
    width:100%;
    height:200px;
  }
  .home-item{background: #fff;text-align: center;margin:5px;font-size:1.2em;padding:20px 0 15px;}
  .hot-line{padding:20px 0;text-align: center;color:#999;}
  .cell-title{padding-left:10px;position: relative;top:-0.4em}
</style>